MVC - View
viewdata & viewbag & viewModel
view component *
Action Reuslt & view engine *
今天的重點是MVC的View部分
會先討論基本View的內容
後面再整理一下生命週期裡到View的流程
前面幾篇有提到View就是前端的頁面顯示
通常不會有複雜的邏輯
從controller傳出去的物件直接顯示出來就好
在ASP .NET Core裡所使用得是Razor語法,View資料夾下面的的都是.cshtml的檔案,透過 .NET 編譯過後會轉成瀏覽器可以看得懂的HTML
實際執行專案會依照controller的名稱去抓取對應的View下面的.cshtml
HomeController.cs
實際在執行時
會先去找Views下面對應的資料夾,找到和action相同的.cshtml
Shared資料夾下是放共用的view,或是partial view
如果找不到對應資料夾下的程式
則會往Shared下去找
剛剛有提到view 是由.cshtml所組成的
會經由編譯後轉成HTML
在View裡面是可以寫C#程式的
只要將
view 除了透過action傳入一個物件當作model使用
也可以透過Viewdata和viewbag的以及tempdata的方式去操作
因為這部分並不是 .NET Core的新功能這裡就先帶過
詳細的介紹可以看看前幾屆寫的文章
ViewModel 也是在 .NET MVC就有的產物
主要是在解決一個View只能處理一個Model的問題
這邊有一些需要注意及特性:
View component是 .NET core新加入的功能
有別於partial view 單純的把View拆開來
還加入了controller的部分,可以將少部分的邏輯做操作頁面
可以把它想成是partial view + controller的
很類似Vue Component的概念
這裡舉一個簡單的例子
假設今天有一個Movie top 3 的排行榜
需要放在View的某個地方
但他又不是View裡面主要的Model
這時候就可以使用View component去實作
新增一支View component
先建立一個叫做ViewComponent的資料夾
新增一支MoviesTopViewComponet.cs
並繼承ViewComponent
在InvokeAsync方法裡面的邏輯很簡單
在這裡就是new一個MoviceService,去取出已經寫好的Movies list
\ViewComponents\MoviesTopViewComponent.cs
新增View component 的View
View Component有可以重複使用的特性
因次在這邊將它放入Shared的資料夾下,並建立對應的folder名稱
\Shared\Components\MoviesTop\Default.cshtml
在View裡面引進這個Component
宣告的方式,只要在目標的view裡面 引入@Component找到helper的InvokeAsync,並傳入Component的名稱,使用await是因為是async
@await Component.InvokeAsync("MoviesTop")
執行結果
可以看到下方的部分是我們剛剛新增的Component
並且是可以重複使用的
這個部分預計延續上一篇的生命週期
整理一下到Result過程中發生的事情
後續會再更新
參考資料
https://ithelp.ithome.com.tw/articles/10194523
https://ithelp.ithome.com.tw/articles/10186515
https://kevintsengtw.blogspot.com/2012/12/aspnet-mvc-viewmodel.html
https://www.c-sharpcorner.com/article/viewcomponent-in-asp-net-core/